<template>
    <div class="page-setting">
        <Header title="我的资产"></Header>
        <div class="content">
            <div class="card">
                <h3>正面</h3>
                <p>
                    <span>点击上传身份证正面</span>
                    <img id="img1" src="" alt="">
                </p>
                <input type="file" name="file" class="input" @touchend="postImg('card_1')" ref="card_1" accept="image/png,image/gif,image/jpeg" />
            </div>
            <div class="card">
                <h3>反面</h3>
                <p>
                    <span>点击上传身份证正面</span>
                    <img id="img2" src="" alt="">
                </p>
                <input type="file" name="file" class="input" @touchend="postImg('card_2')" ref="card_2"  accept="image/png,image/gif,image/jpeg" />
            </div>
            <div class="btn">
                <button class="btn_1" ref="btn_1" @touchend="submitImg">提交认证</button>
            </div>
        </div>
    </div>
</template>

<script>
    // 引入头部组件
    import Header from "@c/Header";
    // 暴露接口
    export default {
        // 注册组件
        components: { Header },
        // 方法
        methods: {
            postImg(card) {
                if(card === 'card_1') {
                    let img1 = document.getElementById('img1');
                    this.$refs.card_1.onchange = () => {
                        // console.log(this.$refs.card_1.files);
                        if(this.$refs.card_1.files.length) {
                            img1.src = URL.createObjectURL(this.$refs.card_1.files[0]);
                        }

                    }
                } else {
                    let img2 = document.getElementById('img2');
                    this.$refs.card_2.onchange = () => {
                        if(this.$refs.card_1.files.length) {
                            img2.src = URL.createObjectURL(this.$refs.card_2.files[0]);
                        }
                    }
                }
            },
            submitImg() {
                let img1 = document.getElementById('img1');
                let img2 = document.getElementById('img2');
                // console.log(img1.src)
                if(img1.src !== 'http://localhost/' && img2.src !== 'http://localhost/') {
                    this.$refs.btn_1.className =  'btn_1 abled';
                }
            }
        }
    }
</script>

<style lang="scss">
.page-setting {
    .content {
        width: 100%;
        text-align: center;
        // 身份验证样式
        .card {
            position: relative;
            width: 90%;
            height: 200px;
            margin: 20px auto;
            border: 3px dotted #263238;
            h3 {
                margin-top: 70px;
                font-size: 18px;
                display: inline-block;
            }
            p {
                font-size: 16px;
                img {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                }
            }
            input {
                position: absolute;
                width: 100%;
                height: 200px;
                left: 0;
                top: 0;
                overflow: visible;
                opacity: 0;
                z-index: 100;
            }
        }
        // 添加button样式
        .btn {
            width: 100%;
            height: 36px;
            padding: 0 40px;
            text-align: center;
            button {
                color: rgba(0, 0, 0, 0.3);
                font-size: 14px;
                min-width: 88px;
                width: 100%;
                height: 36px;
                line-height: 36px;
            }
            .btn_1 {
                outline: none;
                -webkit-appearance: none;
                border-radius: 36px;
                background-color: #e6e6e6;
                &.abled {
                    color: #fff;
                    background-color: skyblue;
                }
            }
        }
    }
    
}
</style>